﻿@{
    ViewData["Title"] = "Game";
}
<h1> </h1>

<script type="text/javascript">

</script>
<style type="text/css">
    #cvs{border: 1px solid #000;width: 500px;}
</style>
<canvas id="cvs"  onclick="clc(event)" width="1000" height="1000">浏览器版本过低</canvas>
<div id="disp"></div>
<script type="text/javascript">
    var cvs = document.getElementById("cvs");
    if(window.innerWidth>window.innerHeight){
        cvs.style.width="500px";
    }
    else{
        cvs.style.width="100%";
    }

    //<数据初始化>
    
    var ctx = cvs.getContext("2d");
    var widthPx=cvs.width;
    var heightPx=cvs.height;
    var widthBlock=15;
    var heightBlock=15;
    var widthSpx=cvs.clientWidth;
    var heightSpx=cvs.clientHeight;
    var eachx=widthPx/widthBlock;
    var eachy=heightPx/heightBlock;
    //</数据初始化>

    //<网格>
    ctx.strokeStyle="#000";
    ctx.lineWidth = "3";
    ctx.beginPath();
    for(var i=0;i<widthBlock;i++){
        var xx=i*eachx+eachx/2;
        ctx.moveTo(xx,0);
        ctx.lineTo(xx,heightPx);
    }
    for(var i=0;i<heightBlock;i++){
        var yy=i*eachy+eachy/2;
        ctx.moveTo(0,yy);
        ctx.lineTo(widthPx,yy);
    }
    ctx.stroke();
    //</网格>

    //<圆形>
    
    if("@ViewBag.map"!=""){
        var map = JSON.parse("@ViewBag.map");
        for(var i=0;i<heightBlock;i++){
            for(var j=0;j<widthBlock;j++){
                if(map[i][j]==1){
                    ctx.fillStyle="#000000";
                    ctx.beginPath();
                    ctx.arc(i*eachx+eachx/2, j*eachy+eachy/2, eachx/3 , 0, Math.PI * 2, true);
                    ctx.closePath();
                    ctx.fill()
                }
                else if(map[i][j]==2){
                    ctx.fillStyle="#ffffff";
                    ctx.beginPath();
                    ctx.arc(i*eachx+eachx/2, j*eachy+eachy/2, eachx/3 , 0, Math.PI * 2, true);
                    ctx.closePath();
                    ctx.fill()
                    ctx.stroke();
                }
                else if(map[i][j]==3){
                    ctx.fillStyle="#ff0000";
                    ctx.beginPath();
                    ctx.arc(i*eachx+eachx/2, j*eachy+eachy/2, eachx/3 , 0, Math.PI * 2, true);
                    ctx.closePath();
                    ctx.fill()
                }
                else if(map[i][j]==4){
                    ctx.fillStyle="#ffffff";
                    ctx.strokeStyle="#ff0000";
                    ctx.beginPath();
                    ctx.arc(i*eachx+eachx/2, j*eachy+eachy/2, eachx/3 , 0, Math.PI * 2, true);
                    ctx.closePath();
                    ctx.fill();
                    ctx.stroke();
                    ctx.strokeStyle="#000000";
                }
            }
        }
    }
    //</圆形>
    function clc(event){
        var x=event.offsetX;
        var y=event.offsetY;
        var cx=0;
        var cy=0;
        var eachSx=widthSpx/widthBlock;
        var eachSy=heightSpx/heightBlock;
        for(var i=0;i<widthBlock;i++){
            if(x<(i+1)*eachSx){
                cx=i;
                break;
            }
        }
        for(var i=0;i<widthBlock;i++){
            if(y<(i+1)*eachSy){
                cy=i;
                break;
            }
        }
        var id = "@ViewBag.identifier";
        window.location.href = "./Game?identifier="+id+"&x="+cx+"&y="+cy;
    }
</script>
